<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn1">测试箭头函数1</button>
		<button id="btn2">测试箭头函数2</button>
		
		<script>
			"use strict"
			
			// 形参的情况
			// 1. 没有形参的情况
			let fun = () => console.log("我是箭头函数")
			fun()
			
			// 2. 只有一个形参的时候 () 可以省略
			let fun1 = a => console.log(a)
			fun1("aaa")
			
			// 3. 两个及两个一撒网的形参的时候 () 不能省略
			let fun2 = (a, b) => console.log(a, b)
			fun2(3, 5)
			
			// 函数体的情况
			// 1. 函数体只有一条语句或者是表达式的时候 {} 可以省略 ----> 会自动返回语句执行的结果, 或表达式的值
			let fun3 = (x, y) => x + y
			console.log(fun3(3, 5))
			
			let fun4 = (x, y) => {
				console.log(x, y)
				return x + y
			}
			console.log(fun4(3, 5))
			
			// 测试箭头函数的this
			let btn1 = document.getElementById("btn1")
			let btn2 = document.getElementById("btn2")
			btn1.onclick = function(){
				alert(this)
			}
			btn2.onclick = () => alert(this)
		</script>
	</body>
</html>
